<template>
  <div class="my-temp">
    <div class="my-temp-list">
      <el-row class="my-temp-list-box" :gutter="34" type="flex" justify="space-around" style="flex-wrap: wrap;">
        <el-col class="my-produ-list-box-item" style="width: auto;" v-for="item in lists" :key="item.id">
          <div class="temp-item">
            <produ :key="'temp-' + item.site_id" :item="item" :produType="'ADMINTEMP'"></produ>
          </div>
        </el-col>
        <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i>
      </el-row>
    </div>

    <el-pagination
      background
      layout="prev, pager, next"
      :current-page="curPage"
      :page-size="pageSize"
      :page-count="totalPage"
      @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>

<script>
  import Produ from '@/views/child/admin/common/Produ.vue';
  import { mapActions, mapState } from 'vuex'
  export default {
    setup () {
      return {
        curPage: 1,
        pageSize: 20,
      }
    },
    computed: {
      ...mapState({
        lists: state => state.user.myLists,
        listsData: state => state.user.myListsData,
        userid: state => state.user.user.userid,
      }),
      totalPage() {
        return this.listsData.totalPage || 0;
      },
    },
    components: {
      Produ,
    },
    beforeMount() {
      this.handleGetTempList({
        classfy_id: '',
        keywords: '',
        status: '',
        page: 1,
        pageSize: this.pageSize,
      });
    },
    methods: {
      ...mapActions({
        handleGetTempList: "user/handleGetTempList",
      }),
      handleCurrentChange(val) {
        this.curPage = val && !isNaN(val) ? val : 1;
        this.handleGetTempList({
          classfy_id: '',
          keywords: '',
          status: '',
          page: this.curPage,
          pageSize: this.pageSize,
        });
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/admin-temp.scss';
</style>
